<template>
  <view class="container">
    <!-- 头部地理位置定位信息 -->
    <view class="header-address">
      <u-icon name="map" size="22" color="#553524"></u-icon>
      <view
        class="address-text"
        @click="getLocationDetail"
        v-if="position === ''">
        {{ showText }}
      </view>
      <view class="address-text" v-else @click="getMapLocation">
        <scroll-view
          scroll-x="true"
          style="width: 100%; overflow: hidden; white-space: nowrap">
          <view>
            {{ position }}
          </view>
        </scroll-view>
      </view>
      <u-icon
        name="arrow-right"
        size="16"
        color="#75787c"
        style="margin-left: 10rpx; margin-top: 5rpx"
        v-if="position"></u-icon>
    </view>
    <view class="logo-img">
      <up-image
        src="/static/logoImg.jpg"
        width="100%"
        mode="widthFix"></up-image>
    </view>
    <!-- 公告信息 -->
    <view class="notice-contain">
      <u-notice-bar
        :text="texts"
        direction="column"
        color="#b87c57"
        font-size="28rpx"
        bgColor="#fff"></u-notice-bar>
    </view>

    <!-- 选择框框 -->
    <view class="select-item">
      <view class="item" @click="goClassify">
        <up-image
          src="/static/cake.png"
          width="120rpx"
          height="120rpx"></up-image>
        <view class="item-text">甜品预订</view>
      </view>
      <view class="item" @click="goDiy">
        <up-image
          src="/static/icon/diyIcon.png"
          width="120rpx"
          height="120rpx"></up-image>
        <view class="item-text">DIY蛋糕</view>
      </view>
    </view>

    <!-- 积分商城与优惠劵 -->
    <view class="points-mall">
      <view class="point-left" @click="goPointsMall">
        <view class="point-item1">
          <up-image
            src="/static/icon/points.png"
            width="110rpx"
            height="110rpx"></up-image>
          <text class="point-text1">积分商城</text>
        </view>
      </view>
      <view class="point-right" @click="goCoupon">
        <view class="point-item2">
          <text class="point-text2">优惠劵</text>
          <up-image
            src="/static/icon/discount.png"
            width="120rpx"
            height="120rpx"></up-image>
        </view>
      </view>
    </view>

    <!-- 添加店长微信框 -->
    <view class="wx-container">
      <view class="wx-text">
        <text class="text1">欢迎添加店长微信</text>
        <text class="text2">有任何问题都会为您解答~</text>
      </view>
      <view class="wx-image">
        <up-image
          src="/static/wxCode.jpg"
          show-menu-by-longpress="true"
          width="120rpx"
          height="120rpx"></up-image>
      </view>
    </view>

    <!-- 店铺地址 -->
    <view class="store-address">
      <view class="store-left">
        <up-image
          src="/static/icon/cakeStore.png"
          width="130rpx"
          height="130rpx"></up-image>
        <view class="address-text">
          <view class="address">麻章区—瑞康二横路37号</view>
          <view class="time">09:00-21:00营业</view>
          <view class="distance">
            {{
              distance ? '距您:' + distance.toFixed(2) + 'km' : '定位后获取距离'
            }}
          </view>
        </view>
      </view>
      <view class="store-right">
        <view class="icon-item" @click="call">
          <up-image
            src="/static/icon/phone.png"
            width="95rpx"
            height="60rpx"></up-image>
          <text style="margin-left: 25rpx">电话</text>
        </view>
        <view class="icon-item" @click="navigateToShop">
          <up-image
            src="/static/icon/daohang.png"
            width="60rpx"
            height="60rpx"></up-image>
          <text style="margin-left: 10rpx">到店</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const QQMapWX = require('../../static/map/qqmap-wx-jssdk.js')

// 腾讯地图API实例化
const qqmapsdk = new QQMapWX({
  key: 'CDEBZ-N75WW-R5VRE-36AIW-AFPCO-2IBEG',
})

// 获取定位信息
const getLocationInfo = () => {
  return new Promise((resolve) => {
    // 位置默认数据
    let location = {
      longitude: 0,
      latitude: 0,
      province: '',
      city: '',
      area: '',
      street: '',
      address: '',
    }
    uni.getLocation({
      type: 'gcj02',
      success(res) {
        location.longitude = res.longitude
        location.latitude = res.latitude
        qqmapsdk.reverseGeocoder({
          location,
          success(response) {
            let info = response.result
            location.province = info.address_component.province
            location.city = info.address_component.city
            location.area = info.address_component.district
            location.street = info.address_component.street
            location.address = info.address
            resolve(location)
          },
        })
      },
      fail(err) {
        console.log(err)
        resolve(location)
      },
    })
  })
}

// 调用获取位置函数
const showText = ref('获取位置信息')
const position = ref('')
const my_latitude = ref('')
const my_longitude = ref('')
const getLocationDetail = async () => {
  showText.value = '定位中......'
  const location = await getLocationInfo()
  position.value = location.address
  my_latitude.value = location.latitude
  my_longitude.value = location.longitude
  getDistance()
}

// 获取腾讯地图选择其他地点
const getMapLocation = () => {
  uni.chooseLocation({
    success: (res) => {
      position.value = res.address
      my_latitude.value = res.latitude
      my_longitude.value = res.longitude
      getDistance()
    },
    fail: () => {
      // 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判读是否有地理授权信息
      uni.getSystemInfo({
        success: (res) => {
          const status = res.authSetting
          if (!status['scope.userLocation']) {
            // 如果授权信息中没有地理位置的授权，则需要弹窗提示用户授权地理信息
            uni.showModal({
              title: '是否授权当前位置',
              content:
                '需要获取您当前的地理位置，请确认授权，否则地图功能将无法使用',
              success: (data) => {
                // 如果用户授权了地理信息，则提示授权成功
                if (data.authSetting['scope.userLocation'] === true) {
                  uni.showToast({
                    title: '授权成功',
                    icon: 'success',
                    duration: 1000,
                  })
                  // 授权成功后，然后再次chooseLocation获取信息
                  uni.chooseLocation({
                    success: (res) => {
                      position.value = res.address
                    },
                  })
                } else {
                  uni.showToast({
                    title: '授权失败',
                    icon: 'none',
                    duration: 1000,
                  })
                }
              },
            })
          }
        },
        fail: (res) => {
          console.log(res)
          uni.showToast({
            title: '调用授权窗口失败',
            icon: 'none',
            duration: 1000,
          })
        },
      })
    },
  })
}

// 公告条显示信息
const texts = ref([
  '欢迎各位顾客进行预订~',
  '首次消费满30元，便可成为尊贵的会员',
  '会员每次消费获取消费金额对应积分',
  '积分能够在积分商城中兑换优惠劵',
])

// 点击DIY预订跳转到DIY甜品页
const goClassify = () => {
  uni.switchTab({
    url: '/pages/classify/classify',
  })
}

const goDiy = () => {
  uni.navigateTo({
    url: '/pages/diyDessert/diyDessert'
  })
}

// 点击跳转到积分商城
const goPointsMall = () => {
  uni.navigateTo({
    url: '/pages/pointsMall/pointsMall',
  })
}
// 点击跳转到我的优惠劵页面
const goCoupon = () => {
  uni.navigateTo({
    url: '/pages/coupon/coupon',
  })
}

// 计算与店铺距离
// 店铺信息
const shopInfo = ref({
  latitude: 21.279015,
  longitude: 110.329155,
  name: '壹糕壹点',
  address: '麻章区瑞康二横路37号',
  phone: '13659706315',
})
const distance = ref('')
const getDistance = () => {
  // 地球平均半径 单位公里
  const R = 6371
  const dLat = (shopInfo.value.latitude - my_latitude.value) * (Math.PI / 180)
  const dLon = (shopInfo.value.longitude - my_longitude.value) * (Math.PI / 180)
  const a =
    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(my_latitude.value * (Math.PI / 180)) *
      Math.cos(shopInfo.value.latitude * (Math.PI / 180)) *
      Math.sin(dLon / 2) *
      Math.sin(dLon / 2)
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
  distance.value = R * c
}

/* 导航到店内 */
// 打开地图并导航到商家位置
const navigateToShop = () => {
  uni.openLocation({
    latitude: shopInfo.value.latitude,
    longitude: shopInfo.value.longitude,
    name: shopInfo.value.name,
    address: shopInfo.value.address,
    success() {
      console.log('导航成功')
    },
    fail(err) {
      console.log('导航失败', err)
    },
  })
}

// 拨打电话
const call = () => {
  uni.makePhoneCall({
    phoneNumber: shopInfo.value.phone,
    success() {
      console.log('拨打成功')
    },
    fail() {
      console.log('拨打失败')
    },
  })
}
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  .header-address {
    width: 100%;
    height: 60rpx;
    background-color: #ffdbdd;
    display: flex;
    align-items: center;
    .address-text {
      width: 75%;
      font-size: 32rpx;
      margin-left: 10rpx;
      color: #553524;
    }
  }
  .logo-img {
    width: 100%;
    height: 650rpx;
  }
  .select-item {
    width: 90%;
    margin: 20rpx auto;
    display: flex;
    justify-content: space-between;
    .item {
      width: 45%;
      height: 200rpx;
      border: 2rpx solid #eee;
      border-radius: 20rpx;
      box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.08);
      background: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .item-img {
        width: 120rpx;
        height: 120rpx;
      }
      .item-text {
        margin-top: 10rpx;
        font-size: 30rpx;
        font-weight: bold;
        letter-spacing: 5rpx;
      }
    }
  }
  .points-mall {
    width: 90%;
    height: 160rpx;
    margin: 20rpx auto;
    background-color: #ffffff;
    border: 2rpx solid #eee;
    border-radius: 20rpx;
    box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    .point-left {
      width: 45%;
      display: flex;
      justify-content: center;
      align-items: center;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 2rpx dashed #553524;
      .point-item1 {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .point-text1 {
          font-size: 28rpx;
          font-weight: bold;
          letter-spacing: 5rpx;
        }
      }
    }
    .point-right {
      width: 45%;
      display: flex;
      align-items: center;
      .point-item2 {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .point-text2 {
          font-size: 28rpx;
          font-weight: bold;
          letter-spacing: 5rpx;
        }
      }
    }
  }

  .wx-container {
    width: 90%;
    height: 180rpx;
    margin: 20rpx auto;
    background-color: #ffffff;
    border: 2rpx solid #eee;
    border-radius: 20rpx;
    box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    .wx-text {
      display: flex;
      flex-direction: column;
      .text1 {
        font-size: 28rpx;
        font-weight: bold;
        letter-spacing: 10rpx;
      }
      .text2 {
        font-size: 22rpx;
        letter-spacing: 8rpx;
        margin-left: -18rpx;
        margin-top: 10rpx;
      }
    }
    .wx-image {
      border-radius: 10rpx;
      background: linear-gradient(#fedcde, #fedcde) left top,
        linear-gradient(#fedcde, #fedcde) left top,
        linear-gradient(#fedcde, #fedcde) right top,
        linear-gradient(#fedcde, #fedcde) right top,
        linear-gradient(#fedcde, #fedcde) left bottom,
        linear-gradient(#fedcde, #fedcde) left bottom,
        linear-gradient(#fedcde, #fedcde) right bottom,
        linear-gradient(#fedcde, #fedcde) right bottom;
      background-repeat: no-repeat;
      width: 150rpx;
      height: 150rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      border: 1rpx solid transparent;
      background-size: 4rpx 22rpx, 22rpx 4rpx, 4rpx 22rpx, 22rpx 4rpx;
    }
  }
  .store-address {
    width: 90%;
    height: 180rpx;
    margin: 20rpx auto;
    background-color: #ffffff;
    border: 2rpx solid #eee;
    border-radius: 20rpx;
    box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .store-left {
      display: flex;
      justify-content: center;
      align-items: center;
      .address-text {
        display: flex;
        flex-direction: column;
        .address {
          font-size: 30rpx;
          font-weight: bold;
        }
        .time {
          font-size: 26rpx;
          color: #666;
          margin-top: 10rpx;
        }
        .distance {
          font-size: 24rpx;
          color: #553524;
          margin-top: 10rpx;
        }
      }
    }
    .store-right {
      display: flex;
      justify-content: center;
      align-items: center;
      .icon-item {
        display: flex;
        flex-direction: column;
        padding-right: 20rpx;
        text {
          font-size: 24rpx;
          margin-top: 10rpx;
        }
      }
    }
  }
}
.container::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}
</style>
